<template>
  <view class="row align-center padding-middle header">
    <!--头部显示 -->
    <view class="row margin-small messagebox">
      <!--头部显示 -->
      <view class="ring">
        <uni-icons type="chatboxes-filled" class="progress-cancel" size="30" ></uni-icons>
      </view>
      <view class="pos-abs number">
        <view class="val border-radius-middle">
        3
        </view>
      </view>
    </view>
    <view class="sep-h-small"/>
    <view class="sep-h-small"/>
    <view class="search-box small-margin flex-grow border-radius-small">
      <!--头部显示 -->
      <input placeholder="搜索你的所有内容" />
    </view>
  </view>
</template>

<script setup>
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue' //也可使用此方式引入组件

</script>

<style scoped>
.header{
  background-color:#f0f0f4;

  .messagebox {
    .number {
      right: -8px;
      top: 5px;

      .val {
        color: white;
        background-color: #dc3023;
        font-size: 12px;
        padding: 5px 5px;
        line-height: 9px;
      }
    }
  }
  .search-box{
    overflow: hidden;
    padding: 5px 5px;
    background-color: white;

    input {
      background-color: white;
      width: 100%;
    
    }
  }
}
</style>
